<template>
  <div class="infoUploader">
    <van-nav-bar class="top" left-arrow @click-left="onClickLeft">
      <template #left>
        <span class="iconfont">&#xe632;</span>
      </template>
      <template #title>
        <span class="xiugaitouxiang">修改头像</span>
      </template>
      <template #right>
        <span class="baocun">保存</span>
      </template>
    </van-nav-bar>
    <van-uploader
      v-model="list"
      max-count="1"
      :before-read="beforeRead"
      :after-read="afterRead"
      @delete="deleteEvent"
      class="img"
    ></van-uploader>
  </div>
</template>

<script>
// import { Photo } from '@/api/my.js'
export default {
  data () {
    return {
      list: []
    }
  },
  methods: {
    onClickLeft () {
      // 跳回到个人信息页面
      this.$router.push('/info')
    },

    // 上传之前
    beforeRead (file) {
      const isImg = file.type === 'image/png'
      const ismit2M = file.size / 1024 / 1021 < 2
      if (!isImg) {
        this.$toast.fail('请上传PNG格式图片')
      }
      if (!ismit2M) {
        this.$toast.fail('请上传2M以内的图片')
      }
      return isImg && ismit2M
    },
    // 读取后
    afterRead (res) {
      // 上传头像到服务器
      const formData = new FormData()
      formData.append('files', res.file)
      // this.$toast.loading({
      //   duration: 0
      // })
      // Photo(formData).then(res => {
      //   this.$toast.success('上传成功')
      //   console.log(res)
      //   this.inputValue = res.data.data[0].id
      // })
    },
    deleteEvent () {
      // 删除事件 ，删除时就不显示保存
    }
  }
}
</script>

<style lang="less" scoped>
.infoUploader {
  .top {
    background-color: #d0584d;
  }
  .img {
    margin-left: 150px;
  }
  .iconfont {
    color: #ffffff;
  }
  .xiugaitouxiang {
    color: #ffffff;
  }
  .baocun {
    color: #fff;
  }
}
</style>
